<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ page import="java.util.*,hotel.entity.*"%>
<section class="content-header">
	<h1>
		<i class="fa fa-calendar-check-o"></i> 预定管理 <small></small>
	</h1>
	<ol class="breadcrumb">
		<li><a href="#"><i class="fa fa-dashboard"></i> Home</a></li>
		<li class="active">预定管理</li>
	</ol>
</section>

<section class="content">
	<div class="box">
		<div class="box-header">
			<button id="btn-add" type="button"
				class="layui-btn layui-btn-radius layui-btn-green">
				<i class="layui-icon">&#xe654;</i>新增预定
			</button>
			<button id="btn-checkin" type="button" class="layui-btn layui-btn-radius layui-btn-warm">
				<i class="layui-icon">&#xe63c;</i>安排入住
			</button>
		</div>

		<div class="box-body">
			<div class="col-md-12">
				<div class="box box-default">
					<div class="box-header with-border">
						<h3 class="box-title">
							<i class="fa fa-search"></i> 预定搜索
						</h3>

						<div class="box-tools pull-right">
							<button type="button" class="btn btn-box-tool" id="plus">
								<i class="fa fa-plus"></i>
							</button>
							<button type="button" class="btn btn-box-tool" id="minus">
								<i class="fa fa-minus"></i>
							</button>
						</div>

					</div>
					<div class="box-body" id="collapse-body">
						<form>
							<div class="col-md-4">
								<label>预定房间类型：</label>
								<select id="categoryid" class="form-control">
									<option value=''></option>
									<%
										List<Category> list = (List<Category>) request.getAttribute("categoryList");
										if (list != null && list.size() > 0)
											for (Category c : list)
												out.print("<option value='" + c.getCategoryid() + "'>" + c.getCategoryName() + "</option>");
									%>
								</select>
							</div>
							<div class="col-md-4">
								<label>预计入住时间：</label> <input id="start_time" class="form-control">
							</div>
							<div class="col-md-4">
								<label>预计退房时间：</label> <input id="end_time" class="form-control">
							</div>
							<div class="col-md-4">
								<label>姓名：</label> <input id="userName" class="form-control">
							</div>
							<div class="col-md-4">
								<label>联系方式：</label> <input id="tele" class="form-control">
							</div>
							<div class="col-md-4">
								<label>预定时间：</label> <input id="reserveTime" class="form-control">
							</div>
							<div class="col-md-4">
								<label>状态：</label> <select id="state" class="form-control">
									<option value=''></option>
									<option value='已预定'>已预定</option>
									<option value='已入住'>已入住</option>
									<option value='逾期'>逾期</option>
								</select>
							</div>
							<div class="col-md-offset-5 col-md-3">
								<br>
								<button type="button" class="btn btn-primary" id="btn-search">
									<i class="fa fa-search"></i> 搜索
								</button>
								<button type="reset" class="btn btn-info" id="reset">
									<i class="fa fa-refresh"></i> 刷新
								</button>
							</div>
						</form>
					</div>
				</div>
			</div>
			<!-- End of ReserveSearchForm -->

			<table class="layui-table" id="reserveTable"></table>

		</div>
	</div>
</section>

<script type="text/javascript">
	layui.use('laydate', function() {
		var start = layui.laydate;
		//执行一个laydate实例
		start.render({
			elem : '#start_time', //指定元素
		});
		var end = layui.laydate;
		end.render({
			elem : '#end_time'
		});
		var reserveTime = layui.laydate;
		reserveTime.render({
			elem : '#reserveTime'
		});
	});

	layui.use('table', function() {
		var table = layui.table;
		table.render({
			elem : '#reserveTable',
			url : 'reservelist',
			page : true,
			cols : [ [ //标题栏
			{
				type:'checkbox',
				rowspan : 2
			},
			{
				field : 'reserveid',
				title : 'ID',
				rowspan : 2,
				align : 'center',
				width : 75,
				sort : true
			}, //rowspan即纵向跨越的单元格数
			//colspan即横跨的单元格数，这种情况下不用设置field和width
			{
				align : 'center',
				title : '预定信息',
				colspan : 5
			}, {
				align : 'center',
				title : '预定人信息',
				colspan : 2
			}, {
				field : 'operateUserId',
				title : '操作员编号',
				rowspan : 2,
				align : 'center',
				sort : true,
				width : 120
			}, {
				field : 'reserveTime',
				title : '预定时间',
				rowspan : 2,
				align : 'center',
				sort : true
			}, {
				field : 'state',
				title : '状态',
				rowspan : 2,
				align : 'center',
				width : 85
			}, ], [ {
				field : 'categoryName',
				title : '房间类型',
				align : 'center'
			}, {
				field : 'amount',
				title : '数量',
				align : 'center',
				width : 80,
				sort : true
			}, {
				field : 'days',
				title : '预定天数',
				align : 'center',
				width : 95,
				sort : true
			}, {
				field : 'start_time',
				title : '计划入住时间',
				align : 'center',
				sort : true
			}, {
				field : 'end_time',
				title : '计划退房时间',
				align : 'center',
				sort : true
			}, {
				field : 'userName',
				title : '姓名',
				align : 'center',
				width : 85
			}, {
				field : 'tele',
				title : '联系方式',
				align : 'center'
			}, ] ]
		});

		//表格数据重载
		$('#btn-search').on('click', function() {
			table.reload('reserveTable', {
				where : { //设定异步数据接口的额外参数，任意设
					op : 'search',
					categoryid : $('#categoryid').val(),
					start_time : $('#start_time').val(),
					end_time : $('#end_time').val(),
					userName : $('#userName').val(),
					tele : $('#tele').val(),
					reserveTime : $('#reserveTime').val(),
					state : $('#state').val()
				},
				page : { curr : 1 }//重新从第 1 页开始 
			});
		});

		//重置
		$('#reset').on('click', function() {
			table.reload('reserveTable', {
				where : {op : 'view',},
				page : { curr : 1 }
			});
		});
		
		//添加按钮
		$('#btn-add').click(function() {
			layer.open({ //layer弹出层
				type : 2,
				title : "新增预定",
				area : [ '900px', '700px' ],
				//content: ['addUser','no'],//无滚动条
				content : 'addReserve',
				shade : [ 0.6, '#000' ],//阴影透明度
				//shadeClose: true,//点击阴影关闭
				anim : 2,//弹出动画
				isOutAnim : false,//关闭无动画
				//skin: 'layui-layer-molv',//皮肤
				end : function(index) {
					table.reload('reserveTable',{
						where : {},
						page : {curr : 1}
					});
				}
			});
		});
		
		//安排入住
		$('#btn-checkin').click(function() {
			var checkStatus = table.checkStatus('reserveTable'); //reserveTable即为数据表格id
			//console.log(checkStatus.data[0].reserveid) //获取选中行的数据
			//获取选中行数量，可作为是否有选中行的条件
			if(checkStatus.data.length>1||checkStatus.data.length==0){
				layer.msg('请选择一行! 当前选中行数: '+checkStatus.data.length, {time : 800,icon : 7});
			}else if(checkStatus.data.length==1){
				layer.open({
					type : 2,
					title : "安排入住",
					area : [ '1000px', '600px' ],
					content : 'checkin?reserveid=' + checkStatus.data[0].reserveid,
					shade : [ 0.6, '#000' ],//阴影透明度
					//shadeClose: true,//点击阴影关闭
					anim : 2,//弹出动画
					isOutAnim : false,//关闭无动画
					end : function(index) {
						table.reload('reserveTable',{where : {},page : {curr : 1}});
					}
				});
			}
		});
		
// 		//查看按钮
// 		$('#btn-view').click(
// 				function() {
// 					var rowData = table.rows({
// 						selected : true
// 					}).data().toArray(); //得到datatables选中行的值并转成数组
// 					if (rowData.length == 1) {
// 						layer.msg('你确定删除该记录吗?', {
// 							time : 0,
// 							btn : [ '确定', '取消' ],
// 							yes : function(index) {
// 								$.ajax({
// 									type : "post",
// 									url : "deleteReserve?reserveid="
// 											+ rowData[0].reserveid,
// 									dataType : "json",
// 									success : function(data) {
// 										layer.msg('删除成功', {
// 											time : 1000,
// 											icon : 1
// 										});
// 										table.ajax.reload();
// 									},
// 									error : function() {
// 										layer.msg('没有权限或系统出错!', {
// 											time : 1000,
// 											icon : 2
// 										});
// 									}
// 								});
// 								layer.close(index);
// 							}
// 						});
// 					} else {
// 						layer.msg('请选择一行!', {time : 1000,icon : 7});
// 					}
// 				});

		//加减号
		$('#plus').click(function() {
			$('#collapse-body').toggle();
		});
		$('#minus').click(function() {
			$('#collapse-body').toggle();
		});
	});
</script>